<template>
  <page-frame>
    <div class="home-person-charge">
      <div class="toptitle">
        <div class="left">居家养老 - 制定服务计划</div>
        <div class="right">
          <div class="btns">
            <div>
              <!--<el-button @click="submitForm()" class="lightGreenBtn">保存</el-button>-->
              <el-button @click="back">返回</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-content">
        <div class="panel">
          <div class="panel-title">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">会员信息</div>
              </el-col>
            </el-row>
          </div>
          <div class="panel-content">
            <el-form :model="ruleForm" label-position="right" label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="会员姓名">
                    <el-input v-model="ruleForm.memberName" :disabled="ways"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="会员编号">
                    <el-input v-model="ruleForm.memberNo" :disabled="ways"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="床位">
                    <el-input v-model="ruleForm.inventedBed" :disabled="ways"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系方式">
                    <el-input v-model="ruleForm.phone" :disabled="ways"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="护理等级">
                    <el-input v-model="ruleForm.lName" :disabled="ways"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="居住地址">
                    <el-input v-model="ruleForm.address" :disabled="ways"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                <el-form-item label="基础套餐">
                <el-tag v-for="combo of serviceComboItem" type="primary">{{combo.comboName}}</el-tag>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="自选套餐">
                <el-tag v-for="item of serviceFreeItem" type="success">{{item.serviceName}}</el-tag>
                </el-form-item>
                </el-col>
                <!--<el-col :span="12">-->
                  <!--<el-form-item label="基础套餐" style="margin-bottom:0px">-->
                    <!--<el-input v-model="ruleForm.comboNames" :disabled="ways"></el-input>-->
                  <!--</el-form-item>-->
                <!--</el-col>-->
                <!--<el-col :span="12">-->
                  <!--<el-form-item label="自选套餐" style="margin-bottom:0px">-->
                    <!--<el-input v-model="ruleForm.comboItems" :disabled="ways"></el-input>-->
                  <!--</el-form-item>-->
                <!--</el-col>-->
              </el-row>
              <!--选择负责人-->
              <!--<el-row>-->
              <!--<el-col :span="22">-->
              <!--<div class="teamMember">-->
              <!--<div class="label">团队成员<span>(双击成员姓名选中)</span></div>-->
              <!--<div class="all">-->
              <!--<div class="input-item">-->
              <!--<el-select v-model="queryData.taskKey" @change="getTeamMembers" placeholder="请选择团队">-->
              <!--<el-option-->
              <!--v-for="item in taskKeys"-->
              <!--:label="item.tmName"-->
              <!--:value="item.tmId">-->
              <!--</el-option>-->
              <!--</el-select>-->
              <!--</div>-->
              <!--<div class="allName">-->
              <!--<div v-for="(item,index) in allEms" @dblclick="choose(item,index)" >{{item.emName}}</div>-->
              <!--</div>-->
              <!--</div>-->
              <!--<div class="choose">-->
              <!--<div class="chooseName">已选择</div>-->
              <!--<div class="Item">-->
              <!--<div v-for="(item, index) in chooseEms">-->
              <!--<span>{{item.emName}}</span>-->
              <!--<span @click="delStaff(item, index)" style="margin-left: 245px"><i class="el-icon-close"></i></span>-->
              <!--</div>-->
              <!--</div>-->
              <!--</div>-->
              <!--<div class="clear" style="clear:both"></div>-->
              <!--</div>-->
              <!--</el-col>-->
              <!--</el-row>-->
            </el-form>
          </div>
        </div>

        <div class="panel">
          <div class="panel-title">
            <div class="grid-content bg-purple">制定计划</div>
          </div>
          <div class="panel-content">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="计划套餐" name="1">
                <div v-for="serviceItem in serviceComboItem">
                  <el-row :gutter="10" style="margin: 0px 30px 5px;width: auto;">
                    <el-col :span="5">
                      <label>套餐名称:</label>
                      <span>{{serviceItem.comboName}}</span>
                    </el-col>
                    <el-col :span="5">
                      <label>套餐价格:</label>
                      <span>{{serviceItem.price}}</span>
                    </el-col>
                  </el-row>
                  <el-table
                    :data="serviceItem.servicePlanItemServiceListDTOs"
                    border
                    style="margin: 0px 30px 5px;width: auto;">
                    <el-table-column
                      prop="serviceName"
                      label="服务项目"
                      width="200"
                    >
                    </el-table-column>
                    <el-table-column
                      label="工作时间"
                    >
                      <template scope="scope">
                        <el-tag v-for="item of scope.row.workInfoforEmp" type="primary">{{item}}</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="频次"
                      width="250">
                      <template scope="scope">
                        <el-row>
                          <el-col :span="14">
                            <el-select disabled v-model="scope.row.period" placeholder="" >
                              <el-option
                                v-for="item in frequencyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                            </el-select>
                          </el-col>
                          <el-col :span="9" v-if="scope.row.period==2||scope.row.period==1">
                            <el-input disabled v-model="scope.row.num"></el-input>
                          </el-col>
                          <el-col :span="1" v-if="scope.row.period==2||scope.row.period==1"><span class="frequencyUnit">次</span></el-col>
                        </el-row>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label=""
                      width="106"
                    >
                      <template scope="scope">
                        <el-button type="primary" size="small" @click="makePlan(scope.row)">安排计划</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>

              <el-collapse-item title="自选项目" name="2">
                <el-table
                  :data="serviceFreeItem"
                  border
                  style="margin: 0px 30px 5px;width: auto;">
                  <el-table-column
                    prop="serviceName"
                    label="服务项目"
                    width="200"
                  >
                  </el-table-column>
                  <el-table-column
                    label="工作时间"
                  >
                    <template scope="scope">
                      <el-tag v-for="item of scope.row.workInfoforEmp" type="primary">{{item}}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="频次"
                    width="250">
                    <template scope="scope">
                      <el-row>
                        <el-col :span="14">
                          <el-select v-model="scope.row.period" disabled placeholder="" >
                            <el-option
                              v-for="item in frequencyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </el-col>
                        <el-col :span="9" v-if="scope.row.period==2||scope.row.period==1">
                          <el-input  disabled v-model="scope.row.num"></el-input>
                        </el-col>
                        <el-col :span="1" v-if="scope.row.period==2||scope.row.period==1"><span class="frequencyUnit">次</span></el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label=""
                    width="106"
                  >
                    <template scope="scope">
                      <el-button type="primary" size="small" @click="makePlan(scope.row)">安排计划</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script >
  import homeApi from '../../service/member/homeApi';
  import commonApi from '../../service/member/commonApi';
  import commonJs from '../../config/common';
  import outRegistrationApi from '../../service/serCenter/outRegistrationApi'
  export default {
    data () {
      return {
        ways:true,
        ruleForm:{
          "address": "",
          "age": 0,
          "bedManager": "",
          "bedManagerInfo": "",
          "cardno": "",
          "comboItems": "",
          "comboNames": "",
          "dateCheckin": "",
          "gender": 0,
          "inventedBed": "",
          "lName": "",
          "lid": "",
          "memberId": 0,
          "memberName": "",
          "memberNo": "",
          "phone": "",
          "serverState": "",
          "type": 0,
          "urgentContactName": "",
          "urgentPhone": ""
        },
        queryData:{
          taskKey:""
        },
        taskKeys:[{
          "createTime": "2017-08-31T07:43:43.926Z",
          "createUser": "string",
          "deleted": 0,
          "orgId": 0,
          "tenantId": 0,
          "tmDescription": "string",
          "tmId": 0,
          "tmName": "string",
          "type": "string",
          "updateTime": "2017-08-31T07:43:43.926Z",
          "updateUser": "string"
        }],
        allEms:[],
        chooseEms:[

        ],
        activeNames: ['1','2'],
        frequencyList:[{
          value:3,
          label:'任意'
        },{
          value:0,
          label:'每天'
        },{
          value:1,
          label:'每周'
        },{
          value:2,
          label:'每月'
        }],
        serviceComboItem:[
          {
            "comboId": null,
            "comboName": "",
            "price": null,
            "servicePlanItemServiceListDTOs": [
              {
                "period": 1,
                "periodNum":"",
                "serviceId": 0,
                "serviceName": "",
                "timeEnd": "",
                "timeStart": "",
                "time":[],
                "tmId": 0,
                "num":"",
                "workInfoforEmp":[]
              }
            ]
          }
        ],
        serviceFreeItem:[
          {
            "period": 0,
            "periodNum":"",
            "serviceId": 0,
            "serviceName": "",
            "timeEnd": "",
            "timeStart": "",
            "time":[],
            "tmId": 0
          }
        ],
      }
    },
    methods: {
      init(){
        if(this.$route.params.memberObj){
          this.currentMemberId = this.$route.params.memberObj.memberId;
          this.ruleForm = this.$route.params.memberObj;
          this.getMemberInfoCare();
        }else{
          this.$router.push({name:'homeBased'});
        };

      },
      /**
       * 根据会员id查询会员信息（套餐）
       */
      getMemberInfoCare(){
        let self = this;

        homeApi.getServicePlanItemBymemberId(this.currentMemberId).then(
          (response)=>{
            if(response.data.status==200){
//              self.ruleForm = response.data.data;
              self.serviceComboItem = response.data.data.servicePlanItemListDTO.servicePlanItemComboListDTOs;
              self.serviceFreeItem  = response.data.data.servicePlanItemListDTO.servicePlanItemServiceListDTOs;
//              for(let freeItem of self.serviceFreeItem){
//                freeItem.workInfoforEmp = freeItem.workInfoforEmp.join("\n");
//              }
            }else{}
          },
        );
      },
      /**
       * 计划安排
       */
      makePlan(serviceItemObj){
        this.$router.push({name:"homeTimeArrange",params:{serviceItemObj:serviceItemObj,memberObj:this.$route.params.memberObj}});
      },
      /**
       * 根据团队ID查询员工
       */
      getTeamMembers(){
        let self = this;
        homeApi.getTeamMembers(self.queryData.taskKey).then(
          (response)=>{
            if(response.data.status==200){
              self.allEms = response.data.data;
            }else{}
          },
        );
      },
      /**
       * 选择负责人
       */
      choose(val,index){
        this.chooseEms.push(val);
        this.allEms.splice(index,1);
      },
      /**
       * 删除负责人
       */
      delStaff(val,index){
        this.chooseEms.splice(index,1);
      },
      /**
       * 返回
       */
      back(){
        this.$router.push({name:'homeBased'});
      },
      /**
       * 保存
       */
      submitForm() {
        let self = this;
        homeApi.assignBedMamager(self.currentMemberId,self.chooseEms).then(
          (response)=>{
            if(response.data.status==200){
              self.$message({
                message: '保存成功',
                type: 'success'
              });
              self.$router.push({name:'homeBased'});
            }else{
              self.$message({
                message: '保存失败',
                type: 'error'
              });
            }
          },
        );
      },
    },
    watch:{
    },
    mounted: function () {
      this.init();
    },

  }
</script>
<style>
     .home-person-charge .el-textarea{
       width:91%!important;
     }

     .home-person-charge .el-autocomplete{
       width:100%;
     }
     .home-person-charge .teamMember{
       margin-left:53px
     }
     .home-person-charge .teamMember .all,.choose{
       border:1px solid #ccc;
       width: 43%;
       padding:10px 10px 0px;
       height: 366px;
       margin-bottom: 20px;
     }
     .home-person-charge .teamMember>.all{
       float: left;
     }
     .home-person-charge .teamMember>.label{
       padding-bottom: 10px;
       font-size: 14px
     }
     .home-person-charge .teamMember>.label>span{
       color:#3fc6d2;
       margin-left: 5px;
       font-size: 12px
     }
     .home-person-charge .teamMember .choose{
       float: right;
     }
     .home-person-charge .teamMember .all .allName{
       height: 313px;
       overflow: scroll;
       border:1px solid #d9d9d9;
     }
     .home-person-charge .teamMember .Item{
       height: 322px;
       overflow: scroll;
       border:1px solid #d9d9d9;
     }
     .home-person-charge .teamMember .chooseName{
       color: #3fc6d2;
       margin-top:10px;
       font-size: 14px;
     }
     .home-person-charge .teamMember .el-icon-close{
       color:#3fc6d2;
       font-size: 12px;
     }
     .home-person-charge .teamMember .all .input-item{
       margin-bottom: 5px;
     }
     .home-person-charge .teamMember .all .input-item .el-select{
       width: 100%!important;
     }
     .home-person-charge .teamMember .all .allName div,.choose .Item div{
       padding:5px 0px;
       cursor: pointer;
     }
     .home-person-charge .teamMember .all .allName div:hover{
       background-color: rgba(228, 250, 255, 0.8);
     }
     .home-person-charge .teamMember .choose .del-staff{
       float: right;
     }
</style>
